<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>File对象</title>
	</head>

	<body>
		<input type="file" id="input">
		<!-- 如果你愿意，可以在这个标签里写上 "Multiple" 表示支持多文件形式 -->

		<!--接下来为这个 input 元素添加 change 事件监听。-->
		<script type="text/javascript">
			var inputElement = document.getElementById("input");
			inputElement.addEventListener("change", handleFiles, false);

			function handleFiles() {
				var fileList = this.files;
				showFiles(fileList)
				//debugger
				/*for (var i = 0; i < fileList.length; i++) {
					console.log(fileList[i]);
				}*/
			}

			function showFiles(files) {
				for (var i = 0; i < files.length; i++) {
					var file = files[i];
					var imageType = /image.*/;

					if (!file.type.match(imageType)) {
						continue;
					}

					var img = document.createElement("img");
					img.classList.add("obj");
					img.file = file;
					preview.appendChild(img);

					var reader = new FileReader();
					reader.onload = (function(aImg) {
						return function(e) {
							aImg.src = e.target.result;
						};
					})(img);
					reader.readAsDataURL(file);
				}
			}
		</script>
	</body>

</html>